<template>
  <form @submit.prevent="handleSubmit" class="base-form">
    <slot></slot>
    
    <div class="mt-6" v-if="showSubmitButton">
      <button 
        type="submit" 
        class="w-full py-3 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors"
        :disabled="loading"
      >
        <span v-if="loading" class="flex items-center justify-center">
          <span class="mr-2 inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
          处理中...
        </span>
        <span v-else>{{ submitText }}</span>
      </button>
    </div>
  </form>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  submitText: {
    type: String,
    default: '提交'
  },
  showSubmitButton: {
    type: Boolean,
    default: true
  }
});

const loading = ref(false);

const emit = defineEmits(['submit']);

const handleSubmit = async () => {
  loading.value = true;
  try {
    await emit('submit');
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.base-form .form-group {
  margin-bottom: 1rem;
}

.base-form .form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #374151;
}

.base-form .form-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  background-color: #f9fafb;
}

.base-form .form-input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.base-form .form-error {
  margin-top: 0.25rem;
  color: #ef4444;
  font-size: 0.875rem;
}
</style>